<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="frame-layout">
	<head>
		<link href="/webjars/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" />
		<link href="lib/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />
		<link href="lib/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
		<style type="text/css">
			ul li {
				list-style: none;
			}
			ul {
				padding-left:0px !important;
			}
		</style>
	</head>
	<body>
		<div th:remove="tag" layout:fragment="content">
			<div class="panel panel-default">
			    <div class="panel-heading" style="padding-bottom: 2px; padding-top: 2px;">
			        <h2 class="panel-title">
			        	<span class="pull-left" style="margin-top: 6px;"><i class="fa fa-pie-chart"></i> Dashboard</span>
<!-- 			        	<span class="pull-right"><a href="javascript:location.reload(true);">刷新</a> <span  id="auto-refresh-seconds">30</span></span> -->
							<span class="pull-right">
								<span th:class="${multiZkClass}" title="当前zk集群"><select class="form-control" id="zks"></select></span>
							</span>
			        	<span class="clearfix"></span>
			        </h2>
			    </div>
			    <div class="panel-body">
			    	<ul class="nav nav-tabs" role="tablist">
			            <li id="count_tab" role="presentation" class="active"><a href="#count" aria-controls="count" role="tab" data-toggle="tab"><i class="fa fa-navicon fa-x"></i> 全网统计</a></li>
			            <li id="domain_tab" role="presentation"><a href="#domain" aria-controls="domain" role="tab" data-toggle="tab"><i class="fa fa-area-chart"></i> 域统计</a></li>
						<li id="servers_tab" role="presentation"><a href="#servers" aria-controls="servers" role="tab" data-toggle="tab"><i class="fa fa-server fa-1x"></i> Executor统计</a></li>
			            <li id="jobs_tab" role="presentation"><a href="#jobs" aria-controls="jobs" role="tab" data-toggle="tab"><i class="fa fa-bar-chart-o fa-fw"></i> 作业统计</a></li>
			            <li id="warn_tab" role="presentation"><a href="#warn" aria-controls="warn" role="tab" data-toggle="tab"><i class="fa fa-bell fa-x"></i> 预警统计</a></li>
			        </ul>
			        <br />
			        <div class="tab-content">
			            <div role="tabpanel" class="tab-pane active" id="count">
			            	<div class="container-fluid">
			    				<div class="row">
					            	<div class="col-lg-3 col-md-6">
				                        <div class="panel panel-primary">
				                            <div class="panel-heading">
				                                <div class="row">
				                                    <div class="col-xs-3">
				                                        <i class="fa fa-navicon fa-5x"></i>
				                                    </div>
				                                    <div class="col-xs-9 text-right">
				                                        <div class="huge" id="domainCount">COUNTING</div>
				                                        <div>总域数</div>
				                                    </div>
				                                </div>
				                            </div>
				                            <a href="javascript:void(0)" onclick="javascript:showDomainCharts();">
				                                <div class="panel-footer">
				                                    <span class="pull-left">查看</span>
				                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
				                                    <div class="clearfix"></div>
				                                </div>
				                            </a>
				                        </div>
				                    </div>
				                    <div class="col-lg-3 col-md-6">
				                        <div class="panel panel-green">
				                            <div class="panel-heading">
				                                <div class="row">
				                                    <div class="col-xs-3">
				                                        <i class="fa fa-server fa-5x"></i>
				                                    </div>
				                                    <div class="col-xs-9 text-right">
				                                        <div class="huge" id="executorCount">COUNTING</div>
				                                        <div>Executor数: 物理机+容器</div>
				                                    </div>
				                                </div>
				                            </div>
				                            <a href="javascript:void(0)" onclick="showExecutorCharts();">
				                                <div class="panel-footer">
				                                    <span class="pull-left">查看</span>
				                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
				                                    <div class="clearfix"></div>
				                                </div>
				                            </a>
				                        </div>
				                    </div>
				                    <div class="col-lg-3 col-md-6">
				                        <div class="panel panel-yellow">
				                            <div class="panel-heading">
				                                <div class="row">
				                                    <div class="col-xs-3">
				                                        <i class="fa fa-cubes fa-5x"></i>
				                                    </div>
				                                    <div class="col-xs-9 text-right">
				                                        <div class="huge" id="jobCount">COUNTING</div>
				                                        <div>总作业数</div>
				                                    </div>
				                                </div>
				                            </div>
				                            <a href="javascript:void(0)" onclick="showJobCharts();">
				                                <div class="panel-footer">
				                                    <span class="pull-left">查看</span>
				                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
				                                    <div class="clearfix"></div>
				                                </div>
				                            </a>
				                        </div>
				                    </div>
				                    <div class="col-lg-3 col-md-6">
				                        <div class="panel panel-red">
				                            <div class="panel-heading">
				                                <div class="row">
				                                    <div class="col-xs-3">
				                                        <i class="fa fa-bell fa-5x"></i>
				                                    </div>
				                                    <div class="col-xs-9 text-right">
				                                        <div class="huge" id="abnormalJobCount">COUNTING</div>
				                                        <div>异常作业</div>
				                                    </div>
				                                </div>
				                            </div>
				                            <a href="javascript:void(0)" onclick="showUnnormalJob();">
				                                <div class="panel-footer">
				                                    <span class="pull-left">查看</span>
				                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
				                                    <div class="clearfix"></div>
				                                </div>
				                            </a>
				                        </div>
				                    </div>
				                </div>
				            </div>
						</div>

						<div role="tabpanel" class="tab-pane" id="domain">
		            		<div class="row">
					    		<ul id="sortable">
					    			<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#domain-rank-body">
													<h3 class="pull-left panel-title">域重要等级分布</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="domain-rank-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="domain-rank-pie" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
						    		</li>
						    		<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#domain-process-count-body">
													<h3 class="pull-left panel-title">全域当天执行数据，总次数：<strong id="domains-total"></strong></h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="domain-process-count-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="domain-process-count-pie" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
						    		</li>
						    		<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#top10-fail-domain-body">
													<h3 class="pull-left panel-title">失败率最高的Top10域(历史)</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="top10-fail-domain-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="top10-fail-domain" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
						    		</li>
						    		<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#top10-unstable-domain-body">
													<h3 class="pull-left panel-title">稳定性最差的Top10域</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="top10-unstable-domain-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="top10-unstable-domain" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
						    		</li>
									<li class="col-lg-6">
										<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#version-domain-number-body">
													<h3 class="pull-left panel-title">域版本分布</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="version-domain-number-body" class="panel-collapse collapse in">
												<div class="panel-body">
													<div id="version-domain-number" style="height: 300px"></div>
												</div>
											</div>
										</div>
									</li>
					    		</ul>
				    		</div>
		            	</div>

						<div role="tabpanel" class="tab-pane" id="servers">
		            		<div class="row">
					    		<ul id="sortable">
									<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#top10-fail-exe-body">
													<h3 class="pull-left panel-title">失败率最高的Top10 Executor(当天)</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="top10-fail-exe-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="top10-fail-exe" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
									</li>
									<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#top10-load-executor-body">
													<h3 class="pull-left panel-title">负荷最重的Top10 Executor</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="top10-load-executor-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="top10-load-executor" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
									</li>
									<li class="col-lg-6">
										<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#version-executor-number-body">
													<h3 class="pull-left panel-title">Executor版本分布</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="version-executor-number-body" class="panel-collapse collapse in">
												<div class="panel-body">
													<div id="version-executor-number" style="height: 300px"></div>
												</div>
											</div>
										</div>
									</li>
					    		</ul>
				    		</div>
		            	</div>

		            	<div role="tabpanel" class="tab-pane" id="jobs">
		            		<div class="row">
					    		<ul>
						    		<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#job-rank-body">
													<h3 class="pull-left panel-title">作业重要等级分布</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="job-rank-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="job-rank-pie" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
						    		</li>
					    			<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#top10-fail-job-body">
													<h3 class="pull-left panel-title">失败率最高的Top10作业(历史)</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="top10-fail-job-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="top10-fail-job" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
									</li>
						    		<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#top10-active-job-body">
													<h3 class="pull-left panel-title">最活跃的Top10作业(当天执行次数最多的作业)</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="top10-active-job-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="top10-active-job" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
									</li>
									<li class="col-lg-6">
					    				<div class="panel panel-default">
											<div class="panel-heading">
												<a data-toggle="collapse" href="#top10-load-job-body">
													<h3 class="pull-left panel-title">负荷最重的Top10作业</h3>
													<i class="pull-right fa fa-minus"></i>
												</a>
												<div class="clearfix"></div>
											</div>
											<div id="top10-load-job-body" class="panel-collapse collapse in">
												<div class="panel-body">
						                			<div id="top10-load-job" style="height: 300px"></div>
						                		</div>
											</div>
										</div>
									</li>
					    		</ul>
				    		</div>
		            	</div>

		            	<div role="tabpanel" class="tab-pane" id="warn">
							<div class="panel panel-default">
								<div class="panel-heading">
									<a data-toggle="collapse" href="#unnormal-job-body">
										<h3 class="pull-left panel-title">异常作业(java/shell作业)</h3>
										<i class="pull-right fa fa-minus"></i>
									</a>
									<div class="clearfix"></div>
								</div>
								<div id="unnormal-job-body" class="panel-collapse collapse in">
									<div class="panel-body">
										<div class="table-responsive">
											<table id="unnormal-job-table" class="table table-bordered table-hover table-striped" style="width:100% !important;">
												<thead>
													<tr>
														<th>作业名</th>
														<th>所属域</th>
														<th>域等级</th>
														<th>作业等级</th>
														<th>本该调度时间</th>
														<th>异常原因</th>
														<th name="unnormal-job-read">操作</th>
													</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading">
									<a data-toggle="collapse" href="#timeout4Alarm-job-body">
										<h3 class="pull-left panel-title">运行超时（告警）的作业分片</h3>
										<i class="pull-right fa fa-minus"></i>
									</a>
									<div class="clearfix"></div>
								</div>
								<div id="timeout4Alarm-job-body" class="panel-collapse collapse in">
									<div class="panel-body">
										<div class="table-responsive">
											<table id="timeout4Alarm-job-table" class="table table-bordered table-hover table-striped" style="width:100% !important;">
												<thead>
												<tr>
													<th>作业名</th>
													<th>所属域</th>
													<th>域等级</th>
													<th>作业等级</th>
													<th>超时秒数</th>
													<th>超时的分片</th>
													<th name="timeout4Alarm-job-read">操作</th>
												</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading">
									<a data-toggle="collapse" href="#unable-failover-job-body">
										<h3 class="pull-left panel-title">无法高可用的作业</h3>
										<i class="pull-right fa fa-minus"></i>
									</a>
									<div class="clearfix"></div>
								</div>
								<div id="unable-failover-job-body" class="panel-collapse collapse in">
									<div class="panel-body">
										<div class="table-responsive">
											<table id="unable-failover-job-table" class="table table-bordered table-hover table-striped" style="width:100% !important;">
												<thead>
													<tr>
														<th>作业名</th>
														<th>所属域</th>
														<th>域等级</th>
														<th>作业等级</th>
													</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading">
									<a data-toggle="collapse" href="#abnormal-container-body">
										<h3 class="pull-left panel-title">异常的容器资源</h3>
										<i class="pull-right fa fa-minus"></i>
									</a>
									<div class="clearfix"></div>
								</div>
								<div id="abnormal-container-body" class="panel-collapse collapse in">
									<div class="panel-body">
										<div class="table-responsive">
											<table id="abnormal-container-table" class="table table-bordered table-hover table-striped">
												<thead>
												<tr>
													<th>资源名</th>
													<th>所属域</th>
													<th>域等级</th>
													<th>异常原因</th>
												</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
		            	</div>
					</div>
			    </div>
			</div>
			<input type="hidden" id="authorizeSaturnConsoleDashBoardAllPrivilege" th:value="${authorizeSaturnConsoleDashBoardAllPrivilege}" />
			<div th:replace="fragments :: success-dialog"></div>
			<div th:replace="fragments :: confirm-dialog(id='dashboard-confirm-dialog', text='')"></div>
			<div th:replace="fragments :: confirm-dialog(id='setUnnormalJobToRead-confirm-dialog', text='')"></div>
			<div th:replace="fragments :: confirm-dialog(id='setTimeout4AlarmJobToRead-confirm-dialog', text='')"></div>
			<div th:replace="fragments :: failure-dialog(id='failure-dialog', reason='')"></div>
		</div>

		<div th:remove="tag" layout:fragment="footer-scripts">
			<script type="text/x-mustache" id="unnormal-job-template">
				<tr>
					<td><a href="job_detail?nns={{nns}}jobName={{jobName}}">{{jobName}}</a></td>
					<td>{{domainName}}</td>
					<td>{{degree}}</td>
					<td>{{jobDegree}}</td>
					<td>{{nextFireTime}}</td>
					<td>{{cause}}</td>
					<td name="unnormal-job-read"><button uuid="{{uuid}}" jobName="{{jobName}}" domainName="{{domainName}}" data-target="#setUnnormalJobToRead-confirm-dialog" id="button-{{jobName}}" title="确认不再告警后，后续将不再为同一条异常作业发送告警信息！" class='btn btn-info' onclick="setUnnormalJobMonitorStatusToRead(this);">不再告警</button></td>
				</tr>
			</script>
			<script type="text/x-mustache" id="timeout4Alarm-job-template">
				<tr>
					<td><a href="job_detail?nns={{nns}}jobName={{jobName}}">{{jobName}}</a></td>
					<td>{{domainName}}</td>
					<td>{{degree}}</td>
					<td>{{jobDegree}}</td>
					<td>{{timeout4AlarmSeconds}}</td>
					<td>{{timeoutItems}}</td>
					<td name="timeout4Alarm-job-read"><button uuid="{{uuid}}" jobName="{{jobName}}" domainName="{{domainName}}" data-target="#setTimeout4AlarmJobToRead-confirm-dialog" id="button-{{jobName}}-timeout4AlarmJob" title="确认不再告警后，后续将不再为同一条异常作业发送告警信息！" class='btn btn-info' onclick="setTimeout4AlarmJobMonitorStatusToRead(this);">不再告警</button></td>
				</tr>
			</script>
			<script type="text/x-mustache" id="unable-failover-job-template">
				<tr>
					<td><a href="job_detail?nns={{nns}}jobName={{jobName}}">{{jobName}}</a></td>
					<td>{{domainName}}</td>
					<td>{{degree}}</td>
					<td>{{jobDegree}}</td>
				</tr>
			</script>
			<script type="text/x-mustache" id="abnormal-container-template">
				<tr>
					<td><a href="overview?name={{nns}}#containers">{{taskId}}</a></td>
					<td>{{domainName}}</td>
					<td>{{degree}}</td>
					<td>{{cause}}</td>
				</tr>
			</script>
			<script src="lib/datatables/jquery.dataTables.js"></script>
			<script src="/webjars/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
			<script>
				$.fn.bootstrapBtn = $.fn.button.noConflict();
			</script>
			<script src="lib/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
			<script src="lib/datetimepicker/moment-with-locales.js"></script>
			<script src="lib/datetimepicker/bootstrap-datetimepicker.js"></script>
			<script src="lib/mustache/mustache.min.js"></script>
			<script src="/webjars/highcharts/4.2.3/highcharts.js"></script>
			<script src="/webjars/highcharts/4.2.3/highcharts-3d.js"></script>
			<script src="js/dashboard.js?v=2.0.5"></script>
		</div>
	</body>
</html>
